.btools-detail-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 350px;

  border-radius: 10px;
  overflow: hidden;

  box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.1);

  z-index: 999999;

  .btools-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    z-index: 10;
  }

  .btools-container {
    width: 100%;
    height: 100%;

    .btools-video-info {
      position: relative;
      padding-left: 30px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: none;

      .btools-title {
        width: 400px;
        height: 62px;
        line-height: 62px;
        color: #fff;
        font-size: 20px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btools-part {
        color: #fff;
        font-size: 14px;
      }

      .btools-list {
        width: 460px;
        height: 200px;

        overflow-y: auto;

        box-sizing: border-box;

        &::-webkit-scrollbar {
          width: 8px;
        }

        // 滚动条 外
        &::-webkit-scrollbar-track {
          background-image: linear-gradient(
            to top,
            lightgrey 0%,
            lightgrey 1%,
            #e0e0e0 26%,
            #efefef 48%,
            #d9d9d9 75%,
            #bcbcbc 100%
          );
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius: 2em;
        }

        // 滚动条 内
        &::-webkit-scrollbar-thumb {
          background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius: 2em;
        }

        li {
          margin: 5px 0;
          list-style-type: none;
          color: #fff;
          font-size: 18px;
        }
      }

      .btools-link {
        margin-top: 10px;
        color: #ccc;
        font-size: 20px;

        a {
          color: $primary-color;
        }
      }
    }
  }

  .btools-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50px;
    height: 50px;

    .sk-chase {
      width: 100%;
      height: 100%;
      position: relative;
      animation: sk-chase 2.5s infinite linear both;
    }

    .sk-chase-dot {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      animation: sk-chase-dot 2s infinite ease-in-out both;
    }

    .sk-chase-dot:before {
      content: '';
      display: block;
      width: 25%;
      height: 25%;
      background-color: #fff;
      border-radius: 100%;
      animation: sk-chase-dot-before 2s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
      animation-delay: -1.1s;
    }
    .sk-chase-dot:nth-child(2) {
      animation-delay: -1s;
    }
    .sk-chase-dot:nth-child(3) {
      animation-delay: -0.9s;
    }
    .sk-chase-dot:nth-child(4) {
      animation-delay: -0.8s;
    }
    .sk-chase-dot:nth-child(5) {
      animation-delay: -0.7s;
    }
    .sk-chase-dot:nth-child(6) {
      animation-delay: -0.6s;
    }
    .sk-chase-dot:nth-child(1):before {
      animation-delay: -1.1s;
    }
    .sk-chase-dot:nth-child(2):before {
      animation-delay: -1s;
    }
    .sk-chase-dot:nth-child(3):before {
      animation-delay: -0.9s;
    }
    .sk-chase-dot:nth-child(4):before {
      animation-delay: -0.8s;
    }
    .sk-chase-dot:nth-child(5):before {
      animation-delay: -0.7s;
    }
    .sk-chase-dot:nth-child(6):before {
      animation-delay: -0.6s;
    }

    @keyframes sk-chase {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes sk-chase-dot {
      80%,
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes sk-chase-dot-before {
      50% {
        transform: scale(0.4);
      }
      100%,
      0% {
        transform: scale(1);
      }
    }
  }

  .btools-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    z-index: -1;
  }
}
